/**
 * @Author: jipeng.Li
 * @Date: 2021-03-03 16:45:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-03-03 16:45:21
 * @Description: 充值金结果模态框内容
 */
import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { fontColorBlack, fontColorCoffee, mainBgColorBlack, mainBgColorWhite, px2dp } from '@/styles';
import { iconBigSuccessGreen } from '@/images';

const RechargeResultModal = (props) => {
  const { price, completeClick, gotoOrderDetails } = props;
  return (
    <View style={styles.resultModalCenter}>
      <View style={{ alignItems: 'center' }}>
        <Image
          style={{
            width: px2dp(294),
            height: px2dp(294)
          }}
          source={iconBigSuccessGreen}
        />
        <Text style={styles.titleFontSize}>提交成功</Text>
        <Text
          style={[
            styles.titleFontSize,
            { marginTop: px2dp(20)
            }]}
        >
          {price}
        </Text>
        <Text style={styles.tipsText}>
          请耐心等待物流公司审核，审核通过后，您可在交易记录中查看余额变动
        </Text>
      </View>
      <View>
        <TouchableOpacity
          style={styles.btnCoffee}
          onPress={() => { completeClick && completeClick(); }}
        >
          <Text style={{ color: mainBgColorWhite, fontSize: px2dp(32) }}>完成</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => { gotoOrderDetails && gotoOrderDetails(); }}
          style={styles.btnTwo}
        >
          <Text style={{ color: fontColorBlack, fontSize: px2dp(32) }}>订单详情</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  resultModalCenter: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: px2dp(100)
  },
  titleFontSize: {
    fontSize: px2dp(40),
    color: mainBgColorBlack,
    fontWeight: 'bold'
  },
  tipsText: {
    color: '#999793',
    fontSize: px2dp(28),
    textAlign: 'center',
    marginTop: px2dp(100)
  },
  btnCoffee: {
    height: px2dp(96),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: fontColorCoffee,
    borderRadius: px2dp(12)
  },
  btnTwo: {
    width: px2dp(520),
    height: px2dp(80),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: px2dp(12),
    backgroundColor: mainBgColorWhite,
    marginTop: px2dp(50),
    borderWidth: px2dp(1),
    borderColor: '#CCCAC8'
  },
});

export default RechargeResultModal;
